<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    // navigationStyle: 'custom',
    navigationBarTitleText: '',
    // navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
import { useUserStore } from '@/store'

// 勾选状态
const isAgreed = ref(false)

// 授权登录方法
const userStore = useUserStore()
async function handleLogin() {
  if (!isAgreed.value) {
    uni.showModal({
      title: '提示',
      content: '请先勾选并同意相关条款',
      showCancel: false,
    })
    return
  }

  const result = await userStore.wxLogin()
  if (result.success) {
    uni.showToast({
      title: '登录成功',
      icon: 'none',
    })
    uni.switchTab({ url: '/pages/mine/index' })
  }
  else {
    uni.showToast({
      title: '登录失败',
      icon: 'none',
    })
  }
}

// 切换勾选状态
function toggleAgreement() {
  isAgreed.value = !isAgreed.value
}

// 跳转协议页面
function goAgree(type) {
  if (type === 0) {
    uni.navigateTo({
      url: '/pages/agreement/userAgreement',
    })
  }
  else if (type === 1) {
    uni.navigateTo({
      url: '/pages/agreement/privacyPolicy',
    })
  }
}
</script>

<template>
  <view class="box-border min-h-[100vh] flex flex-col items-center overflow-hidden bg-#f8f8f8">
    <!-- 油车港LOGO -->
    <view class="mt-36 text-90rpx font-bold">
      油车港LOGO
    </view>
    <!-- 授权登录按钮 -->
    <view
      class="mt-20 h-90rpx flex items-center justify-center rounded-3xl bg-[#212121] px-16 text-white"
      @click="handleLogin"
    >
      授权登录成为会员
    </view>

    <!-- 同意条款区域 -->
    <view class="mt-8 flex flex-col items-center justify-center">
      <view class="flex">
        <view
          class="mr-3 h-4 w-4 flex items-center justify-center border border-gray-300 rounded"
          :class="{ 'bg-[#212121] border-[#212121]': isAgreed }"
          style="border: 2rpx solid gray"
          @click="toggleAgreement"
        >
          <text v-if="isAgreed" class="text-white">
            ✓
          </text>
        </view>
        <view class="text-[28rpx] text-gray-600">
          阅读并同意
        </view>
      </view>
      <view class="text-[28rpx] text-[#ceb09e]" @click="goAgree(0)">
        《油车港文旅用户服务协议》
      </view>
      <view class="text-[28rpx] text-[#ceb09e]" @click="goAgree(1)">
        《油车港文旅消费者隐私政策》
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
